<template>
  <!-- 
  作用域插槽:
    作用域插槽可以理解为带参数的插槽  
    简单地说就是子组件提供了参数 该参数仅限于插槽使用
    父组件可以根据子组件传递的插槽数据进行不同的接收方式
  -->

  <div>
    <h2>分类列表</h2>
    <div class="typeList">
      <!-- 
        组件通信-作用域插槽  方式1
        需求: 父组件内 使用子组件内的变量
        原理: VUE中的作用域插槽可以让父组件使用插槽时插槽内容能够访问子组件中的数据
        步骤: 
        1. 将子组件的数据绑定到插槽 slot 的属性上
        2. 使用组件 用template渲染插槽 用v-slot="自定义变量名"接收slot所有的属性和值

       -->

      <Item title="音乐">
        <template v-slot="scop">
          <ul>
            <li>你听得到</li>
            <li>最长的电影</li>
            <li>作用域插槽:{{ scop.obj.age}} </li>
          </ul>
        </template>
      </Item>

      <Item title="小花">
        <template >
          <img src="./assets/1.webp" style="width: 100%" alt="" />
        </template>
      </Item>

      <Item title="西装">
        <template >
          <img src="./assets/2.png" style="width: 100%" alt="" />
        </template>
      </Item>

    </div>
  </div>
</template>

<script>
import Item from './components/Item.vue'
export default {
  components: {
    Item
  }
}
</script>

<style scoped>
.typeList {
  display: flex;
  justify-content: space-around;
}
</style>